<template>
	<view class="community-page">
		<view class="community-profile">
			<view class="box">
				<view class="thead">
					<view class="friends">
						<view class="t">
							<text>我的社区</text>
							<button @click="onSkip('/package/mine/invitation')">+邀请好友</button>
						</view>
						<view class="f">
							<text>{{ all_teamcount }}</text>
						</view>
					</view>
					<view class="performance">
						<view class="t">
							<text>总业绩</text>
						</view>
						<view class="f">
							<text>{{ total_amount }}</text>
						</view>
					</view>
				</view>
				<view class="tbody">
					<view class="row">
						<text>直邀好友</text>
						<text>{{ zt_teamcount }}</text>
					</view>
					<view class="row">
						<text>推荐好友</text>
						<text>{{ team_teamcount }}</text>
					</view>
					<view class="row">
						<text>入驻商家</text>
						<text>{{ business_count }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="community-details">
			<view class="community-details__tabs">
				<view v-for="(item, index) in communityTab.nodes" :key="index" :class="{
							item: true,
							'is-active': communityTab.key == item.key
						}" @click="changeCommunityTab(item)">
					<view class="cell">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
			<view class="community-details__sub_tabs" v-if="communityTab.key == 2">
				<view class="" @click="changeTab(0) ">
					<view class="tab_name">商家业绩</view>
					<view class="tab_underline">
						<view :class="{'active_color':newTabsActive==0}"></view>
					</view>
				</view>
				<view class="" @click="changeTab(1)">
					<view class="tab_name">个人业绩</view>
					<view class="tab_underline">
						<view :class="{'active_color':newTabsActive===1}"></view>
					</view>
				</view>
			</view>
			<view class="community-details__body">
				<view class="">
					<view class="community-details__list">
						<view v-for="(item, index) in list" :key="index" class="item">
							<view class="cell">
								<view class="avatar">
									<image :src="item.headimg" mode=""></image>
								</view>
								<view class="name">
									<text>{{ item.nickname }}</text>
									<text>({{ 'ID.' + item.id }})</text>
									<text class="lv">
										<image :src="item.imglist" mode=""></image>
									</text>
								</view>
								<view class="desc">
									<text>{{ item.phone }}</text>
									<text>{{ item.regdate }}</text>
								</view>
								<view class="flow">
									<text>日流水总额：</text>
									<text>{{ item.payamount }}</text>
								</view>
								<view class="call" @click="handleCall(item.mobile)">
									<image src="https://wx.2024csnl.com/static/u0507/icon-tel.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyTeam
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				all_teamcount: '-',
				total_amount: '-',
				zt_teamcount: '-',
				team_teamcount: '-',
				business_count: '-',
				list: [],
				noMoreData: false,
				myteamCount: '-',
				totalcommission: '-',
				newTabsActive: 0,
				pagenum: 1,
				titList: ['姓名', '时间', '累计消费'],
				headetList: [{
						tit: '成长值',
						val: '--'
					},
					{
						tit: '贡献度',
						val: '5000'
					},
					{
						tit: '粉丝人数',
						val: '20'
					},
				],
				communityTab: {
					key: 1,
					nodes: [{
							key: 1,
							label: '社区明细',
						},
						{
							key: 2,
							label: '销售业绩',
						}
					]
				},
				tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
			}
		},
		onLoad() {
			this.onGetMyTeamData()
			this.onGetMyTeamList()
		},
		onReachBottom() {
			this.pagenum += 1
			if (this.communityTab.key == 1) {
				this.onGetMyTeamList('bottom')
			} else {
				if (this.newTabsActive == 0) {
					this.onGetMyTeamXs('bottom')
				} else {
					this.onGetMyTeamBusineXs('bottom')
				}
			}

		},
		methods: {
			// 切换社区和明细
			changeCommunityTab(obj) {
				this.communityTab.key = obj.key
				this.pagenum = 1
				if (this.communityTab.key == 1) {
					this.onGetMyTeamList()
				} else {
					if (this.newTabsActive == 1) {
						this.onGetMyTeamXs()
					} else {
						this.onGetMyTeamBusineXs()
					}
				}
			},
			changeTab(index) {
				this.newTabsActive = index;
				this.pagenum = 1;
				if (index == 1) {
					this.onGetMyTeamXs()
				} else {
					this.onGetMyTeamBusineXs()
				}
			},
			// 拨打电话
			handleCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			async onGetMyTeamData() {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamdata', {})
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.all_teamcount = data.all_teamcount;
					this.total_amount = data.total_amount;
					this.zt_teamcount = data.zt_teamcount;
					this.team_teamcount = data.team_teamcount;
					this.business_count = data.business_count;
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamList(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamlist', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamXs(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamxs', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamBusineXs(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/mybusinessxs', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.community-page {
		min-height: 100vh;
		background: #eaeaea;
	}
	
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;
	
		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.community-profile {
		padding: 15px;

		.box {
			background: #ff9b9b;
			border-radius: 20px;
			color: #ffffff;
		}

		.thead {
			display: flex;
			padding: 20px;
			margin-bottom: -20px;

			.friends {
				flex: 1;

				.t {
					white-space: nowrap;

					text {
						font-size: 32rpx;
					}

					button {
						display: inline-block;
						vertical-align: middle;

						padding: 0 10px;
						margin: 0 0 0 10px;
						line-height: 50rpx;
						background: #ffdca3;
						color: #f95b47;
						font-size: 24rpx;

						&::after {
							border: 0;
						}
					}
				}

				.f {
					text {
						font-size: 24px;

						&::after {
							content: '人';
							font-size: 14px;
						}
					}
				}
			}

			.performance {
				flex: 1;
				text-align: right;

				.f {
					font-size: 32rpx;
				}
			}
		}

		.tbody {
			display: flex;
			padding: 20px;

			.row {
				flex: 1;
				position: relative;

				&:nth-child(n+2) {
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						height: 30px;
						margin: -15px 0 0 0;
						border-left: 1px solid #ffcecd;
						border-right: 1px solid #f48580;
					}
				}

				text {
					display: block;
					line-height: 25px;
					text-align: center;
				}
			}
		}
	}

	.community-details {
		margin: 5px 15px 15px;

		.community-details__sub_tabs {
			height: 124upx;
			width: 100%;
			padding: 0 120upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f7f7f7;

			>view {
				.tab_name {
					font-size: 34upx;
					color: #1B1B1B;
					margin-bottom: 20upx;
				}

				.tab_underline {
					display: flex;
					justify-content: center;

					>view {
						width: 52upx;
						height: 10upx;
						border-radius: 4upx;
					}

					.active_color {
						background-color: #41644A;
					}
				}
			}
		}


		.community-details__tabs {
			display: flex;
			align-items: self-end;

			.item {
				position: relative;
				flex: 1;

				&:first-child {
					.cell {
						border-radius: 10px 0 0 0;
					}

					&.is-active {
						z-index: 2;

						.cell {
							&::before {
								content: '';
								position: absolute;
								right: 0;
								top: 0;
								bottom: 0;
								left: 50%;
								z-index: 0;
								transform: skewX(15deg) translateX(15px);
								border-radius: 0 10px 0 0;
								background: #ffffff;
							}
						}
					}
				}

				&:last-child {
					.cell {
						border-radius: 0 10px 0 0;
					}

					&.is-active {
						z-index: 2;

						.cell {
							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								right: 50%;
								z-index: 0;
								transform: skewX(-15deg) translateX(-15px);
								border-radius: 0 10px 0 0;
								background: #ffffff;
							}
						}
					}
				}

				&.is-active {
					.cell {
						background: #ffffff;
						color: #f95b47;
						font-weight: bold;

						text {
							height: 60px;
							line-height: 60px;
						}
					}
				}
			}

			.cell {
				position: relative;
				background: #f2988e;
				color: #ffffff;

				text {
					position: relative;
					display: block;
					height: 50px;
					line-height: 50px;
					text-align: center;
					z-index: 1;
				}
			}
		}

		.community-details__body {
			background: #ffffff;
			border-radius: 0 0 10px 10px;
		}

		.community-details__list {
			.item {
				position: relative;
				border-bottom: 1px solid #eaeaea;
			}

			.cell {
				position: relative;
				padding: 20px 60px 20px 90px;
			}

			.avatar {
				position: absolute;
				left: 20px;
				top: 25px;

				image {
					display: block;
					width: 60px;
					height: 60px;
				}
			}

			.name {
				line-height: 20px;
				white-space: nowrap;

				text {
					font-size: 15px;

					&.lv {
						font-size: 12px;
						padding: 1px 5px;
						border-radius: 3px;
						color: #ffffff;
						margin-left: 5px;

						image {
							width: 12px;
							height: 12px;
						}
					}
				}
			}

			.desc {
				line-height: 30px;

				text {
					font-size: 12px;
					color: #666666;
					margin-right: 5px;
				}
			}

			.flow {
				line-height: 20px;

				text {
					font-size: 14px;
					color: #f95b47;
				}
			}

			.call {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 80px;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					display: block;
					width: 40px;
					height: 40px;
				}
			}
		}
	}
</style>